<template>
	<view class="container">
		<view class="fix">
			<view class="item">
				<view class="label">问题描述</view>
				<view class="textarea">
					<textarea v-model="FormData.detail" @input="onChange" placeholder="请输入问题描述" maxlength="150"></textarea>
					<view class="num">{{ num }}/150</view>
				</view>
			</view>
			<view class="item">
				<view class="label">照片上传</view>
				<imageUpload :image="FormData.img" @onChange="changeImg"></imageUpload>
			</view>
			<button v-if="num < 1" class="button" type="primary" disabled>确 定</button>
			<button v-else class="button" type="primary" @click="submit">确 定</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			num: 0,
			FormData: {
				detail: '',
				img: ''
			}
		};
	},

	methods: {
		onChange(e) {
			this.num = e.detail.value.length;
		},
		changeImg(e) {
			this.FormData.img = e.join(',');
		},
		submit() {
			console.log(this.FormData);
		}
	}
};
</script>

<style lang="scss">
.container {
	padding: 20rpx 40rpx;
	.fix {
		.item {
			margin-bottom: 20rpx;
			.label {
				font-size: 28rpx;
				padding: 10rpx 0 20rpx;
			}
			.textarea {
				width: 100%;
				height: 380rpx;
				background: #fff;
				border-radius: 20rpx;
				box-shadow: $uni-shadow-base;
				position: relative;
				textarea {
					box-sizing: border-box;
					width: 100%;
					height: 100%;
					padding: 20rpx;
					font-size: 28rpx;
					line-height: 1.6;
				}
				.num {
					position: absolute;
					right: 24rpx;
					bottom: 20rpx;
					font-size: 26rpx;
					color: $uni-secondary-color;
				}
			}
		}
		.button {
			margin-top: 100rpx;
		}
	}
}
</style>
